<!DOCTYPE html>
<html>
<head>
    <title>温度监控</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h1>温度数据监控</h1>
    <canvas id="chart" width="800" height="400"></canvas>

    <script>
        const ctx = document.getElementById('chart').getContext('2d');
        const chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: '温度 (°C)',
                    data: [],
                    borderColor: 'rgb(255, 99, 132)',
                    tension: 0.1
                }]
            }
        });

        async function updateData() {
            const res = await fetch('/api/data');
            const data = await res.json();
            
            chart.data.labels = data.map(item => item.time);
            chart.data.datasets[0].data = data.map(item => item.temp);
            chart.update();
        }

        setInterval(updateData, 1000);  // 每秒更新
        updateData();
    </script>
</body>
</html>